<template>
  <div id="yoso">
<!--
    <div class="top">
      <a href="#"><span>河北</span></a>
      <ul>
        <li class="l1" v-show="!login"> <a href="#/login">登录</a> </li>
        <li class="l1" v-show="login"> <a href="#/userUpdate">{{user.u_name}}</a> </li>
        <li class="l2"><a href="#/order">我的订单</a></li>
        <li class="l3"><a href="#">我的京东</a></li>
        <li class="l4"><a href="#">京东会员</a></li>
        <li class="l5"><a href="#">企业采购</a></li>
        <li class="l6"><em>客户服务</em> </li>
        <li class="l7"><em>网站导航</em> </li>
        <li class="l8"><em>手机京东</em></li>
      </ul>
    </div>
-->

    <div class="header">
      <div class="logo">
        <img src="../../../static/img/home/logo.png" alt="">
      </div>
      <div class="search">
        <input type="text" v-model="key">
        <button @click="search">搜索</button>
        <button class="cart" @click="">购物车</button>
      </div>
      <div class="hotwords">
        <ul>
          <li class="" v-for="h in hotwords"><a :href="h.hw_path">{{h.hw_name}}</a></li>
        </ul>
      </div>

      <div class="ma" id="ma" v-if="ma">
        <div class="dis" id="dis" @click="ma=false">x</div>
        <img src="../../../static/img/home/ma.png" alt="二维码">
      </div>
    </div>

    名称<el-input style="width: 70px" v-model="name"></el-input>
    价格区间<el-input style="width: 70px" v-model="minPrice"></el-input>-
    <el-input style="width: 70px" v-model="maxPrice"></el-input><el-button icon="el-icon-search" circle @click="paging(1)"></el-button>

    <div id="center" class="format">
      <div id="head">

      </div>
      <div id="main">
        <div id="tuijian" class="format clearfix">
          <ul v-for="(hot,i) in page.list" id="c_ul">
            <li class="commodity">
              <div class="img">
                <a href="javascript:void (0)" @click="toCartAdd(hot.c_id)">
                  <img :src="hot.c_photopath">
                </a>
              </div>
              <div class="describe"><a href="javascript:void (0)" @click="toCartAdd(hot.c_id)">{{hot.c_describe | describe_length}}</a></div>
              <div class="price"><span>￥{{hot.c_price}}</span></div>
            </li>
          </ul>
        </div>
          <!--<ul v-for="commodity in page.list">
            <li>
              <a href="#"><img :src="commodity.c_photopath" width="200px" @click="toCartAdd(commodity.c_id)"></a>
              <div><span>{{commodity.c_name}}</span></div>
              <div><span>{{commodity.c_describe}}</span></div>
              <div><span>价格:{{commodity.c_price}}</span></div>
            </li>
          </ul>-->
      </div>

    </div>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.curPage" :page-sizes="[4,8]" :page-size="page.pageSize" layout="total,sizes,prev,pager,next,jumper" :total="page.count"></el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ma:true,
        login:false,
        user:{},
        pageSize:4,
        page:{},
        name:'',
        type:'',
        minPrice: '',
        maxPrice:'',
        key:'',
        hotwords:[]
      }
    },
    methods:{
      paging(curPage){
/*        this.$axios.get('/CommodityServlet/list?curPage='+curPage + '&c_name=' + this.name + '&pageSize=' + this.pageSize + '&g_id=' + this.$route.params.id + '&minPrice='+this.minPrice + '&maxPrice=' + this.maxPrice)
          .then(resp=>{
            this.page = resp.data;
          })*/
      },
      search(){},
      handleCurrentChange(newPage){
        this.paging(newPage)
      },
      handleSizeChange(newSize){
        this.pageSize = newSize;
        this.paging(1)
      },
      toCartAdd(c_id){
        this.$router.push('/commodity/single/'+c_id)
      },

    },
    filters:{
      ellipsis(value){
        if (!value) return '';
        if (value.length > 10) {
          return value.slice(0,10) + '...'
        }
        return value
      },
      describe_length(value){
        if (!value) return '';
        if (value.length > 25) {
          return value.slice(0,25) + '...'
        }
        return value
      }
    },
    created() {
      this.user= this.$store.state.user;
      this.login = this.user.u_id !== undefined;
      this.paging(1)
/*      this.$axios.get('/HotWordServlet/findAll')
        .then(resp=>{
          this.hotwords = resp.data;
        })*/
    }

  };
</script>



<style scoped>
  #yoso{
    background-color: #f4f4f4;
  }
  .clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix{
    *zoom: 1;
  }
.format{
  width: 990px;
}
#center{
  margin: 0 auto;
  width: 900px;
}
#main{
  margin: 0 auto;
  width: 990px;
}
#main ul li{
    width: 200px;
    background-color: white;
    float: left;
    margin: 10px 10px;
  }
#main ul li:hover{
  box-shadow: 5px 5px 6px #bfbaa0;
}
</style>
<!--为你推荐-->
<style>
  #tuijian ul li:hover{
    box-shadow: 5px 3px 5px rgba(156, 156, 156, 0.4);
  }
  .commodity .img{
    margin-top: 30px;
  }
  .commodity .img img{
    width: 120px;
  }
  .commodity .describe{
    line-height: 1.5;
    margin-left: 10px;
    text-align: center;
    margin-top: 30px;
    width: 170px;
    height: 40px;
    color: #9b9b9b;
    font-size: 12px;
  }
  .commodity .price{
    margin-left: 8px;
    text-align: left;
    margin-top: 8px;
    color: red;
    font-size: 18px;
    font-weight: bolder;
  }
  #tuijian_nav{
    margin-bottom: 12px;
  }
  #tuijian_nav ul li{
    float: left;
    background-color: white;
    padding: 18px 53px;
    font-size: 16px;
    font-weight: bolder;
  }
</style>
<!--header-->
<style>
  .header{
    position: relative;
    width: 1265px;
    height: 141px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .header .logo{
    background-color: #fff;

    float: left;
    width: 348px;
    height: 141px;

  }
  .header .search{
    background-color: white;
    float: left;
    width: 670px;
    height: 60px;

  }
  .header .search input{
    background-color: #fff;

    outline: none;
    border:2px solid red;
    float: left;
    height: 35px;
    width: 430px;
    margin: 21px 0 0 25px;
    text-indent: 10px;
  }
  .header .search button{
    border: none;
    background-color: red;
    color: white;
    float: left;
    height: 38px;
    width: 60px;
    margin-top: 21px;
  }
  .header .search .cart{
    border: 1px solid #eeeeee;
    color: red;
    background-color: white;
    float: left;
    height: 38px;
    width: 130px;
    margin-left: 20px;
  }
  .header .search .cart:hover{
    border-color: red;
  }
  .header .hotwords{
    float: left;
    width: 490px;
    height: 30px;
  }
  .header .hotwords ul{
    float: left;
    margin-left: 25px;
  }
  .header .hotwords ul li{
    float: left;
    list-style-type: none;
    font-size: 12px;
    margin: 5px 10px 0 0;


  }
  .header .hotwords ul li a{
    color: #999999;


  }
  .header .hotwords ul li a:hover{
    color: red;
  }
  .header .navitems{
    float: left;
    width: 810px;
    height: 51px;
  }
  .header .navitems ul{
    float: left;
    margin-left: 20px;
  }
  .header .navitems ul li{
    float: left;
    list-style-type: none;
    font-size: 15px;
    margin-right: 25px;
    margin-top: 23px;
  }
  .header .navitems ul li .fir{
    font-size: 15px;
    color: red;
    font-weight: bold;
  }
  .header .ma{
    position: absolute;
    width: 77px;
    height: 77px;
    top: 5px;
    right: 75px;
  }
  .header .ma .dis{
    cursor: pointer;
    position: absolute;
    top: -7px;
    left: -7px;
    font-size: 12px;
  }
</style>
